<template>
	<view>
		<view class="item">
			<view>
				<view class="content">
					<view class="page-group">
						<text class="fold-page"></text>
						<text class="page">{{couponInfo.couponType =='1' ?'满减券' :'折扣券'}}</text>
					</view>
					<text class="dot-left"></text>
					<text class="dot-right"></text>
					<view class="coupon-detail">
						<view v-if="couponInfo.couponType =='2'">
							<text>{{couponInfo.discount}}</text>
							<text>折</text>
						</view>
						<view v-else-if="couponInfo.couponType =='1'">
							<text>{{couponInfo.amount}}</text>
							<text>元</text>
						</view>
						<view>
							<view class="text-bold text-black text-sm">
								{{couponInfo.threshold >0? '订单满'+couponInfo.threshold+'可以使用' :'无门槛优惠券'}}
							</view>
							<view class="text-black text-sm">{{couponInfo.useRange =='1' ? '全部商品可用' :'指定商品可用'}}</view>
							<view>
								<view class="text-xs margin-tb-sm">有效期至{{couponInfo.receiveEndedAt}}</view>
							</view>
						</view>
						<view>
							<button class="cu-btn round sm bg-red" @tap="save"
								v-if="!couponUser && !couponInfo.couponUserId">立即领取</button>
							<navigator class="cu-btn round sm bg-red"
								v-if="(couponUser && couponUser.status=='0') || couponInfo.couponUserId"
								hover-class="none" :url="'/pages/goods/goods-list/index?couponId=' + couponInfo.id">
								已领取,去使用</navigator>

						</view>

					</view>
				</view>
				<view class="padding-lr padding-tb-xs">
					<view class="flex align-start">使用说明</view>
					<view class="flex align-start">{{couponInfo.useDescription}}</view>
				</view>
				<view class="ribbon" v-if="couponUser">
					{{couponUser.status =='0'?'未使用' : couponUser.status =='1'?'已使用' : couponUser.status =='2'?'已过期' :''}}
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		saveCouponUser
	} from '@/api/couponuser.js'
	export default {
		props: {
			couponInfo: {
				type: Object,
				default: () => {}
			},
			couponUser: {
				type: Object,
				default: () => null
			},
		},
		data() {
			return {
				theme: getApp().globalData.theme,
			}
		},

		methods: {
			// 领取优惠券
			save() {
				saveCouponUser({
					couponId: this.couponInfo.id
				}).then(response => {
					uni.showToast({
						title: '领取成功',
						icon: 'success',
						duration: 2000
					});
					this.$emit('changeCoupon', response.data.id)
				})
			},

			toUse() {

			}
		}
	}
</script>
<style lang="scss" scoped>
	.item {
		overflow: hidden;
		margin: 10px;
		padding-left: 2px;
		position: relative;

	}

	.item>view {
		background: #fff;
		border-radius: 5px;
	}

	.item .dot-left,
	.item .dot-right {
		display: block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #f5f5f5;
		position: absolute;
		z-index: 999;
	}

	.item .dot-left {
		bottom: -6px;
		left: -6px;
	}

	.item .dot-right {
		bottom: -6px;
		right: -6px;
	}

	.item .page-group {
		position: absolute;
		top: 10px;
		left: -2px;
		width: 100%;
		max-width: 120px;
	}

	.item .page-group .fold-page {
		display: block;
		width: 2px;
		height: 5px;
		background: #db0113;
		transform: skewY(-40deg);
		position: absolute;
		top: -1px;
		left: 0;
		z-index: 0;
	}

	.item .page-group .page {
		position: absolute;
		z-index: 1;
		display: block;
		padding: 0 10px;
		height: 20px;
		background: linear-gradient(137deg, #ff5b5b 0%, #db0113 100%);
		border-radius: 0 20px 20px 0;
		color: #fff;
		text-align: center;
		font-size: 12px;
		overflow: hidden;
	}

	.item .content {
		width: 100%;
		height: 90px;
		border-bottom: 1px dotted #f5f5f5;
		position: relative;
		z-index: 2;
	}

	.item .content .coupon-detail {
		display: flex;
		justify-content: space-between;
		padding: 0 15px 0 20px;
	}

	.item .content .coupon-detail>view {
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item .content .coupon-detail>view:first-child {
		color: #e21422;
		padding-top: 20px;
		width: 30%;
	}

	.item .content .coupon-detail>view:first-child>text:first-child {
		font-size: 28px;
	}

	.item .content .coupon-detail>view:first-child>text:last-child {
		font-size: 16px;
		padding: 9px 0 0;
	}

	.item .content .coupon-detail>view:last-child>view {
		color: #dd0d1f;
		border: 1px solid #dd0d1f;
		border-radius: 20px;
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 76px;
		height: 22px;
	}

	.item .coupon-detail>view:nth-child(2) {
		flex-direction: column;
		padding-top: 5px;
	}

	.item .coupon-detail>view:nth-child(2)>view {
		width: 100%;
	}

	.item .ribbon {
		width: 80px;
		height: 20px;
		background: #dd0d1f;
		position: absolute;
		right: -20px;
		top: 10px;
		transform: rotateZ(45deg);
		text-align: center;
		color: #fff;
		font-size: 12px;
	}
</style>
